<template>
	<view class="container-dialSettingDetail">
		<view class="cell1">
			<text>SN： </text>
			<text class="cell-itemvalue">{{sn}}</text>
		</view>
		<view class="cell1" @click="show=true">
			<text>拨号类型： </text>
			<text class="cell-itemvalue">{{formModel.netType.lobel ? formModel.netType.lobel:'请选择拨号类型'}}</text>
			<text><u-icon label="" size="16" name="arrow-right"></u-icon></text>
		</view>
		<view class="cell-list">
			<u--form labelPosition="left" :model="formModel" ref="uForm" labelWidth="70">
				<u-form-item label="单条上行:" prop="userInfo.uploadSpeed" borderBottom ref="item1">
					<u--input v-model="formModel.uploadSpeed" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="线路数量:" prop="userInfo.bandwidthNum" borderBottom ref="item1">
					<u--input v-model="formModel.bandwidthNum" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="地区范围:" prop="userInfo.area" borderBottom ref="item1" @click="isArea = !isArea">
					<u--input v-model="formModel.area" placeholder="请选择地区" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="运营商:" prop="userInfo.isp" borderBottom ref="item1" @click="ispCode = true;">
					<u--input v-model="formModel.isp.lobel" placeholder="请选择运营商" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				</u-form-item>
				<u-form-item label="调度区域:" prop="userInfo.limitedArea" borderBottom ref="item1">
					<u-radio-group v-model="formModel.limitedArea" placement="row" @change="groupChange"
						activeColor="#FE5102">
						<u-radio :customStyle="{margin: '0 20rpx'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" labelColor="#FE5102" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</u--form>
		</view>
		<u-picker :show="show" :columns="[dialDetail.netType]" keyName="lobel" @cancel="show=false"
			@confirm="confirmPick"></u-picker>
		<u-picker :show="ispCode" :columns="[dialDetail.ispCode]" keyName="lobel" @cancel="ispCode=false"
			@confirm="confirmIspCodePick"></u-picker>
		<u-picker :show="isArea" :columns="[dialDetail.area]" @cancel="isArea=false"
			@confirm="confirmAreaPick"></u-picker>
		<view class="bottom">
			<u-button type="warning" customStyle="width: 300rpx" color="#FE5102" shape="circle" text="下一步"
				@click="handleNext"></u-button>
			<view class="" style="text-align: center;margin-top: 10rpx;font-size: 12px;color: #b2b1b5;">请确认设备处于在线状态
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dialDetail: {},
				show: false,
				isArea: false,
				ispCode: false,
				sn: '',
				dialType: '请选择拨号类型',
				formModel: {
					sn: '',
					area: '',
					isp: '',
					netType: '请选择拨号类型',
					uploadSpeed: '',
					bandwidthNum: '',
					limitedArea: 0,
				},
				radiolist1: [{
						name: '全国',
						value: 0,
						disabled: false
					},
					{
						name: '大区',
						value: 1,
						disabled: false
					},
					{
						name: '省内',
						value: 2,
						disabled: false
					}
				],
			};
		},
		onLoad(options) {
			this.sn = options.sn
			this.getDialDetail()
		},
		methods: {
			async getBaseInfo() {
				const res = await this.$fun.ajax.post('butt/getBaseInfo', {
					sn: this.sn
				})
				if (res && res.code == 1) {
					const netType = this.dialDetail.netType.filter(i => i.id == res.data.netType)
					const area = this.dialDetail.area.filter(i => i == res.data.area)
					const isp = this.dialDetail.ispCode.filter(i => i.id == res.data.isp)
					this.formModel = {
						...res.data,
						netType: netType[0],
						area: area[0],
						isp: isp[0],
						limitedArea: 0
					}
				}
			},
			async getDialDetail() {
				const res = await this.$fun.ajax.post('butt/baseInfo', {})
				if (res && res.code == 1) {
					this.dialDetail = res.data
					this.getBaseInfo()
				}
			},
			confirmAreaPick(e) {
				this.formModel.area = e.value[0]
				this.isArea = false
			},
			confirmIspCodePick(e) {
				this.formModel.isp = e.value[0]
				this.ispCode = false
			},
			async handleNext() {
				const {
					netType,
					uploadSpeed,
					isp,
					area,
					bandwidthNum
				} = this.formModel
				if (!netType.id) return this.$fun.msg('请选择拨号类型')
				if (!uploadSpeed) return this.$fun.msg('请输入宽带上行')
				if (!bandwidthNum) return this.$fun.msg('请输入线路数量')
				if (!area) return this.$fun.msg('请选择地区范围')
				if (!isp.id) return this.$fun.msg('请选择运营商')
				const params = {
					...this.formModel,
					sn: this.sn,
					netType: netType.id,
					isp: isp.id
				}
				const res = await this.$fun.ajax.post('butt/addBaseInfo', params)
				if (res && res.code == 1) {
					this.$fun.jump(`/pageC/dialInfo/dialInfo?sn=${this.sn}&netType=${netType.id}`)
				}
			},
			confirmPick(e) {
				this.formModel.netType = e.value[0]
				this.show = false
			},
			groupChange(n) {
				// this.formModel.limitedArea = n
			},
			// radioChange(n) {
			//   console.log('radioChange', n);
			// }
		}
	}
</script>

<style scoped lang="scss">
	.container-dialSettingDetail {
		padding: 0 30rpx;

		.cell1 {
			background-color: #f8f8f8;
			height: 80rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			margin: 20rpx 0;

			.cell-itemvalue {
				flex: 1;
			}
		}

		.cell-list {
			background-color: #f8f8f8;
			border-radius: 10rpx;
			padding: 20rpx;
		}

		.bottom {
			background-color: #fff;
			height: 150rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding-top: 20rpx;
		}
	}
</style>